<template>
  <a-spin :spinning="pageLoading">
    <a-form-model class="detail-form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="Banner">
        <a-upload
            name="file"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :action="Util.getUploadImagePath()"
            :before-upload="beforeUpload"
            @change="handleChange"
        >
          <img v-if="form.image" :src="form.image" alt="avatar" style="width: 100%"/>
          <div v-else>
            <a-icon :type="uploadLoading ? 'loading' : 'plus'"/>
            <div class="ant-upload-text">
              Upload
            </div>
          </div>
        </a-upload>
      </a-form-model-item>
      <a-form-model-item label="Url">
        <a-input allowClear v-model="form.url" placeholder="请输入外链地址（说明：指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。否则将出现空白或其他错误）"/>
      </a-form-model-item>
      <a-form-model-item label="Banner位置">
        <a-select allowClear placeholder="选择位置" v-model="form.type">
          <a-select-option :value="v.id" v-for="(v, i) in Config.bannerType" :key="i">{{ v.title }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 5 }">
        <a-button type="primary" @click="onSubmit"> 提交</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-spin>
</template>
<script>
import config from "@/tools/config";

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

export default {
  data() {
    return {
      Config: {},
      pageLoading: false,
      uploadLoading: false,
      labelCol: {span: 5},
      wrapperCol: {span: 14},
      id: '',
      form: {
        image: "",
        url: "",
        type: 1
      },
    };
  },
  created() {
    this.Config = config
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      this.getData(this.$route.query.id)
    }
  },
  methods: {

    // 获取数据
    getData(id) {
      this.pageLoading = true
      this.Http.get("/admin/banner/detail", {
        id: id
      }).then(res => {
        this.pageLoading = false
        if (res.code === 1) {
          this.form = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 提交更新
    onSubmit() {
      let url, data
      if (this.id) {
        url = "/admin/banner/update"
        data = {
          id: this.id,
          ...this.form
        }
      } else {
        url = '/admin/banner/create'
        data = this.form
      }
      this.Http.post(url, data).then(res => {
        if (res.code == 1) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 上传
    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.uploadLoading = true;
        return;
      }
      if (info.file.status === 'done') {
        this.form.image = info.fileList[0].response.data.path
      }
    },

    // 上传前检测格式和大小
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!');
      }
      return isJpgOrPng && isLt2M;
    },
  },
};
</script>
